<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cmder - 🔧</title>
</head>

<style>
    .term-input {
        background-color: #24262E;
        border: 0;
        height: 35px;
        font-size: 36px;
        color: white;
        outline: none;
        width: 95%;
    }
</style>

<body style="background-color:#24262E;">
    <div style="color: white;font-size: 35px;">
        <div id="old-info"></div>
        <div id="wait-input">
            <span>~</span> <input type="text" class="term-input" maxlength="102" id="term-input" autocomplete="off">
        </div>
    </div>
</body>

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/mousetrap/1.6.3/mousetrap.min.js"></script>
<script src="https://www.layuicdn.com/layer-v3.1.1/layer.js"></script>

<script>
    $(document).ready(function () {
        // 初始化输入信息框焦点
        document.getElementById('term-input').focus();

        var history = [];
        var hisnow = 0;

        $("#term-input").focusout(function () {
            document.getElementById('term-input').focus();
        })

        $("#term-input").keydown(function (e) {
            if (e.keyCode == 13) {
                var cmd = $("#term-input").val();
                if (cmd != "") {
                    $("#term-input").val("");
                    sendCommand(cmd);

                    history.push(cmd);
                    hisnow = 0;
                }
            } else if (e.keyCode == 76 && e.ctrlKey) {
                $("#old-info").html("");
                return false;
            } else if (e.keyCode == 38) {
                // 上一条指令操作
                if (history.length > hisnow) {
                    hisnow++;
                    $("#term-input").val(history[history.length - hisnow]);
                    console.log("向上！" + history.length + " " + hisnow);
                    console.log(history);
                }
            } else if (e.keyCode == 40) {
                // 下一条指令操作
                if (hisnow > 1) {
                    hisnow--;
                    $("#term-input").val(history[history.length - hisnow]);
                    console.log("向下！" + history.length + " " + hisnow);
                    console.log(history);
                }
            }
        });
    });

    function sendCommand(cmd) {
        if (cmd == "cls" || cmd == 'clean') {
            $("#old-info").html("");
        } else {
            var url = "{{domain}}/admin/api/cmder?code=" + cmd;
            $.get(url, function (res) {
                $("#old-info").append("<div><span>~</span> <a>" + cmd + "</a></div>");
                $("#old-info").append("<div><a>" + res.data + "</a></div>");
            });
        }
    }
</script>

</html>